require('../../less/views/login.less');
var React = require('react');
var Form = require('../controls/Form');
var Button = require('../controls/Button');
module.exports = React.createClass({
	getInitialState:function(){
		return {
			formItems: [
				{ title: 'Username', placeholder: 'user name', name:'UserName', type:'text', tip: '* Username is required.', required: true },
				{ title: 'Password', placeholder: 'password', name:'Pwd', type:'password' },
				{ title: 'Project', name:'Tenant', textKey: 'TenantName', valueKey: 'TenantName', type:'select', data: Store.post('/ddp/tenant/v1/list', {}) },
			]
		};
	},
	componentDidMount: function (){

	},
	render:function(){
		return (
			<div className="v-login">
				<img className="bg-img" src="./images/bg/bg4.jpg" />
				<div className="main">
					<div className="head">Login Page</div>
					<div className="logo">
						<img className="logo-img" src="./images/ciscologo.png" />
					</div>
					<div className="form">
						<Form
							method="POST"
							layout="stacked"
							action="/ddp/signin"
							style={{ margin: 25 }}
							onSubmitSuccess={(data)=>{this.props.onSubmitSuccess(data);}}
							onSubmitError={(data)=>Popup.message({content: "Submit Error: " + data.status, type: 'warning'})}
							items={this.state.formItems} >
							<Button style={{ marginTop: 25, fontSize: 16, fontWeight: 600, height: 40, lineHeight: '30px' }} text="Login" onClick={(props)=>{props.form.submit()}}/>
						</Form>
					</div>
				</div>
			</div>
		);
	}
});
